<template>
  <el-container>
    <el-aside width='250px'>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
      >
        <el-input
          placeholder="请输入任务编号"
          prefix-icon="el-icon-search"
        ></el-input>
        <el-menu-item index="1">
          <i class="el-icon-s-claim"></i>
          <span slot="title">1601012348830485800</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row>
            <el-col :span="4"><div class="grid-content bg-purple">任务详情</div></el-col>
            <el-col :span="1" :offset="19"><el-button size="mini" icon="el-icon-refresh" circle></el-button></el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="8" >
              <div class="grid-content bg-purple">
                <div style="justify-content: space-between"><span>任务编号:</span><span>1601012348830485800</span></div>
                <div style="justify-content: space-between"><span>任务时间:</span><span>2020-09-25  13:39:09</span></div>
                <div style="justify-content: space-between"><span>提交条数:</span><span>1</span></div>
                <div style="justify-content: space-between"><span>已发送条数:</span><span>1</span></div>
            </div>
            </el-col>
            <el-col :span="8" style="border-right: 1px solid  #ccc;border-left: 1px solid  #ccc">
              <div class="grid-content bg-purple-light">
                <div style="justify-content: space-between"><span>ERR:</span><span>1</span></div>
                <div style="justify-content: space-between"><span>BINVALID:</span><span>1</span></div>
                <div style="justify-content: space-between"><span>UNDELIV:</span><span>1</span></div>
                <div style="justify-content: space-between"><span>REJECTED:</span><span>1</span></div>
                <div style="justify-content: space-between"><span>ACCEPTED:</span><span>1</span></div>
                <div style="justify-content: space-between"><span>UNKNOWN:</span><span>1</span></div>
                <div style="justify-content: space-between"><span>DELIVERED:</span><span>1</span></div>
            </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div>发送内容:</div>
                <div>【大富豪酒店】尊敬的用户，大富豪酒店将于2020年09月25日在洪山区地方盛大开业，开业期间所有用户消费只需要5折！退订回T</div>
            </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-row>
        <el-col :span="8">
          <el-card style="height:100%">
            <div slot="header" class="clearfix">
              <el-row>
                <el-col :span="7"><div class="grid-content bg-purple">号码列表</div></el-col>
                <el-col :span="1" :offset="12"><el-button size="mini">导出</el-button></el-col>
              </el-row>
            </div>
            <div>
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                style="height: 600px"
              >
                <el-input
                  placeholder="请输入号码"
                  prefix-icon="el-icon-search"
                >
                </el-input>
                <el-scrollbar style="height:100%">
                  <el-menu-item  v-for="num in 1000" :key='num'>
                    <i class="el-icon-user"></i>
                    <span slot="title">1317703767{{num}}</span>
                  </el-menu-item>
                </el-scrollbar>
              </el-menu>
            </div>
          </el-card>
        </el-col>
        <el-col :span="15" :offset="offset">
          <el-card style="height:100%">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'MyTask',
  data () {
    return {
      currentDate: new Date(),
      offset: 1
    }
  }
}
</script>

<style lang="less" scoped>
.el-aside{
  background-color: #FFF;
}
.el-main{
  font-family: "Microsoft YaHei";
}
.box-card{
  margin-bottom: 25px;
}

.el-scrollbar__wrap{
  overflow-x: hidden;
}
</style>
